<!-- <!DOCTYPE HTML> -->
<html>
<head>
	<meta charset="utf-8">
	<title>Nwagon demo</title>
	<style>
		*{margin:0;padding:0;}
		div{padding:0px; overflow: hidden; height: auto;}
		.hgroup{padding:20px;background-color:#e9e9e9;}
		.hgroup h1{font-family:Tahoma;}
		.hgroup p{margin:10px 0;font-size:10px}
		h2{margin:0;padding:20px;border:1px solid #000;background-color:#f9f9f9;border-width:1px 0;font-family:Tahoma;}
	</style>

	<link rel='stylesheet' href='Nwagon.css' type='text/css'>
	<script src='Nwagon.js'></script>

</head>
<body>
	<h1>
		<a href="http://html.nhncorp.com/nwagon">Nwagon 홈페이지</a>
	</h1>
	
	<h2>TEST</h2>
	<h2>Radar Chart with Dimmed Background</h2>
	<div id="chart12"></div>
	<script>

		var options = {
			'legend':{
				names: ['Perceivable', 'Information', 'Understandable', 'Enough', 'Epilepsy', 'Operable', 'Navigation','Error'],
				hrefs: []
					},
			'dataset': {
				title: 'Web accessibility status',
				values: [['n/a',53,67,23,78, 55, 45, 89]], 
				bgColor: '#f9f9f9',
				fgColor: '#30a1ce'
			},
			'chartDiv': 'chart12',
			'chartType': 'radar',
			'chartSize': {width:600, height:300}
		};

		Nwagon.chart(options);

	</script>
	<h2>Radar Chart</h2>
	<div id="chart11"></div>
	<script>

		var options = {
			'legend':{
				names: ['Perceivable', 'Information', 'Understandable', 'Enough', 'Epilepsy', 'Operable', 'Navigation','Error'],
				hrefs: []
					},
			'dataset': {
				title: 'Web accessibility status',
				values: [[33,53,67,23,78,45,69, 89], [53,67,23,78,45,69, 89, 33]], 
				bgColor: '#f9f9f9',
				fgColor: '#30a1ce'
			},
			'chartDiv': 'chart11',
			'chartType': 'radar',
			'chartSize': {width:600, height:300}
		};

		Nwagon.chart(options);

	</script>

	<h2>Line chart</h2>
	<div id="chart71"></div>
	<script>
		var options = {
			'legend':{
				names: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15',]
					},
			'dataset':{
				title:'Playing time per day', 
				values: [[56,76], [58,66], [60,62], [58,70], [85, 76], [86,83], [82, 73], [77,66], [87,66], [49,56], [58,76], [85, 76], [56,83], [56, 83], [45, 34]],
				colorset: ['#3366cc', '#dc3912'],
				fields:['Company A', 'Company B']
			},
			'chartDiv' : 'chart71',
			'chartType' : 'line',
			'leftOffsetValue': 40,
			'bottomOffsetValue': 60,
			'chartSize' : {width:700, height:300},
			'minValue' :20,
			'maxValue' : 100,
			'increment' : 20
		};

		Nwagon.chart(options);
	</script>

	<h2>Line chart with offset values</h2>
	<div id="chart7"></div>
	<script>
		var options = {
			'legend':{
				names: ['08-12', '08-19', '08-26', '09-02', '09-09', '09-16', '9-23']
					},
			'dataset':{
				title:'Playing time per day', 
				values: [[77,47, 66], [76,53, 66], [49,62, 45], [58,86, 76], [48, 85, 76], [56, 48,83], [56, 48,83]],
				// values: [[77,66], [106,66], [49,22], [58,76], [85, 76], [56,83], [56, 83]],
				// values: [[66], [66], [45], [76], [76], [83], [83]],
				colorset: ['#DC143C','#FF8C00', '#2EB400'],
				fields:['Error', 'Warning', 'Pass']
			},
			'chartDiv' : 'chart7',
			'chartType' : 'line',
			'leftOffsetValue': 50,
			'bottomOffsetValue': 60,
			'chartSize' : {width:700, height:300},
			'minValue' : 40,
			'maxValue' : 100,
			'increment' : 10
		};

		Nwagon.chart(options);
	</script>	
	


	<h2>Area chart</h2>
	<div id="chart72"></div>
	<script>
		var options = {
			'legend':{
				names: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15',]
					},
			'dataset':{
				title:'Playing time per day', 
				values: [[56,76], [58,66], [60,62], [58,70], [85, 76], [86,83], [82, 73], [77,66], [87,66], [49,56], [58,76], [85, 76], [56,83], [56, 83], [45, 34]],
				colorset: ['#3366cc', '#dc3912'],
				fields:['Company A', 'Company B']
			},
			'chartDiv' : 'chart72',
			'chartType' : 'area',
			'leftOffsetValue': 40,
			'bottomOffsetValue': 60,
			'chartSize' : {width:700, height:300},
			'minValue' :20,
			'maxValue' : 100,
			'increment' : 20
		};

		Nwagon.chart(options);
	</script>

	<h2>Comparison chart</h2>
	<div id="chart73"></div>
	<script>
		var options = {
			'legend':{
				names: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15',]
					},
			'dataset':{
				title:'Playing time per day', 
				values: [[56,76], [58,66], [60,62], [58,70], [85, 76], [86,83], [82, 73], [77,66], [87,66], [49,56], [58,76], [85, 76], [56,83], [56, 83], [45, 34]],
				colorset: ['#3366cc', '#dc3912'],
				fields:['Company A', 'Company B']
			},
			'chartDiv' : 'chart73',
			'chartType' : 'jira',
			'leftOffsetValue': 40,
			'bottomOffsetValue': 60,
			'chartSize' : {width:700, height:300},
			'minValue' :20,
			'maxValue' : 100,
			'increment' : 20
		};

		Nwagon.chart(options);
	</script>

	<h2>Polar Pie chart</h2>
	<div id="Nwagon11"></div>
	<script>
	    var options = {
	        'legend':{
	            names: [['A'], ['B'], ['C']]
	        },
	        'dataset': {
	            title: 'Avg Bill Paid',
	            values: [[32],[78],[42]],
	            degree_values:[510, 180, 310],
	            colorset: ['#2EB400', '#2BC8C9', "#666666"],
	            fields: ['A', 'B',  'C'],
	            opacity:[0.9]
	        },
	        'core_circle_value' : ['50.6%'],
	        'core_circle_radius':25,
	        'maxValue' : 100,
	        'increment' : 20,
	        'chartDiv': 'Nwagon11',
	        'chartType': 'polar_pie',
	        'chartSize': {width:700, height:400}
	    };
	    Nwagon.chart(options);
	</script>

	<h2>Polar Area chart</h2>
	<div id="Nwagon"></div>
	<script>
	    var options = {
	        'legend':{
	            names: [['A-a'], ['B-a', 'B-b', 'B-c'], ['C-a',  'C-b', 'C-c', 'C-d']]
	        },
	        'dataset': {
	            title: 'Web accessibility status',
	            values: [[60], [50, 100, 67], [90, 70, 44, 88]],
	            colorset: ['#2EB400', '#2BC8C9', "#666666"],
	            fields: ['A', 'B', 'C'],
	            opacity:[0.3, 0.5, 0.7, 0.9]
	        },
	        'core_circle_value' : ['72.7%'],
	        'core_circle_radius':30,
	        'maxValue' : 100,
	        'increment' : 20,
	        'chartDiv': 'Nwagon',
	        'chartType': 'polar',
	        'chartSize': {width:700, height:400}
	    };
	    Nwagon.chart(options);
	</script>

	<h2>Column chart</h2>
	<div id="chart8"></div>
	<script>
		var options = {
			'legend': {
	            names: ['A','B','C','D','E','F','G','H','I'],
	            hrefs: []
	        },
	        'dataset': {
	            title: 'Playing time per day',
	            values: [5,7,1,4,6,3,5,2,10],
	            colorset: ['#DC143C'/*, '#FF8C00', '#30a1ce'*/],
	            fields:['Error']
	        },
	        'chartDiv': 'chart8',
	        'chartType': 'column',
	        'chartSize': { width: 700, height: 300 },
	        'maxValue': 10,
	        'increment': 1
		};

		Nwagon.chart(options);

	</script>

	<h2>Multi Column chart</h2>	
	<div id="chart18"></div>
	<script>
		var options = {
			'legend':{
				names: ['08-12', '08-19', '08-26', '09-02', '09-09', '09-16','09-16', '09-16', '09-16'],
				hrefs: []
					},
			'dataset':{
				title:'Playing time per day', 
				values: [[5,7,2,6], [2,5,7,4], [7,2,3,6], [6,1,5,3], [5,3,8,8], [8,3,1,6], [6,3,9,8], [6,2,6,2], [8,2,4,2]],
				colorset: ['#DC143C','#FF8C00', '#2EB400', '#666666'],
				fields:['Working Time', 'Late count', 'Blah','Vacation']
				},
			'chartDiv' : 'chart18',
			'chartType' : 'multi_column',
			'chartSize' : {width:700, height:300},
			'maxValue' : 10,
			'increment' : 1
		};

		Nwagon.chart(options);

	</script>

	<h2>Stacked Column chart</h2>	
	<div id="chart17"></div>
	<script>
		var options = {
			'legend':{
				names: ['08-12', '08-19', '08-26', '09-02', '09-09', '09-16','09-16', '09-16', '09-16', '09-16', '09-16', '09-16'],
				hrefs: []
					},
			'dataset':{
				title:'Playing time per day', 
				values: [[5,7,2,6], [2,5,7,4], [7,2,3,6], [6,1,5,3], [5,3,8,8], [8,3,1,6], [6,3,9,8], [6,2,6,2], [6,2,6,2],[6,2,6,2], [5,3,8,8], [8,3,1,6]],
				colorset: ['#DC143C','#FF8C00', '#2EB400', '#666666'],
				fields:['Working Time', 'Late count', 'Blah','Vacation']
				},
			'chartDiv' : 'chart17',
			'chartType' : 'stacked_column',
			'chartSize' : {width:700, height:300},
			'maxValue' : 30,
			'increment' : 3
		};

		Nwagon.chart(options);

	</script>


	<h2>Pie chart</h2>
	<div id="chart"></div>
	<script>
		
		var options = {
			'dataset': {
				title: 'Web accessibility status',
				values:[1, 25, 3, 10, 7],  
				colorset: ['#2EB400', '#2BC8C9', '#2EB400', "#f09a93", "#666666"],
				fields: ['A', 'B',  'C', 'D', 'E'] 
			},
			'donut_width' : 100, 
			'core_circle_radius':0,
			'chartDiv': 'chart',
			'chartType': 'pie',
			'chartSize': {width:600, height:300}
		};

		Nwagon.chart(options);
	</script>
	<h2>Donut chart</h2>
	<div id="chart_d"></div>
	<script>
		
		var options = {
			'dataset': {
				title: 'Web accessibility status',
				values:[1, 25, 3, 10, 7],  
				colorset: ['#2EB400', '#2BC8C9', '#2EB400', "#f09a93", "#666666"],
				fields: ['A', 'B',  'C', 'D', 'E'] 
			},
			'donut_width' : 40, 
			'core_circle_radius':60,
			'chartDiv': 'chart_d',
			'chartType': 'donut',
			'chartSize': {width:600, height:300}
		};

		Nwagon.chart(options);
	</script>
 
</body>
</html>
